var ECharts;
$(document).ready(function () {

    require.config({
        baseUrl: ctx + '/resource/plugins/echarts4',
        paths: {
            echarts: 'echarts',
            roma: 'theme/roma',
        }
    });
    require(
        [
            'echarts',
            'roma'
        ],
        function (ec) {
            ECharts = ec;
            forecast = ECharts.init(document.getElementById('forecast'), 'roma');
            queryForeCast();
        }
    );
});

function queryForeCast() {
    $.ajax({
        url: ctx + "/Forecast/forecastQuery",
        type: "post",
        data: "KPI_CODE=" + KPI_CODE + "&EXT_UNIT_ID=" + EXT_UNIT_ID,
        success: function (data) {
            var map = JSON.parse(data);
            var list = map.list;
            var listJx = map.listJx;
            var listDrz = map.listDrz;
            var xdata = [];
            var ydata1 = [];
            var ydata2 = [];
            var ydata3 = [];
            var ydata4 = [];
            var x_value = [];
            for (var i = 0; i < list.length; i++) {
                xdata.push(list[i].KPITREND_HOUR);
                if (list != null && list.length != 0 && list.length >= (i + 1)) {
                    ydata1.push(list[i].KPITREND_VALUE);
                }
                if (listJx != null && listJx.length != 0 && listJx.length >= (i + 1)) {
                    ydata2.push(listJx[i].KPITREND_VALUE);
                }
                if (listDrz != null && listDrz.length != 0 && listDrz.length >= (i + 1)) {
                    ydata3.push(listDrz[i].KPI_VALUE);
                }
                ydata4.push(list[i].KPI_THRESHOLDVALUE);
            }
            option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    formatter: function (series) {
                        return series;
                    },
                    textStyle: {
                        color: '#AAAAAA'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: '#AAAAAA'
                        }
                    },
                    data: xdata
                }],
                yAxis: [{
                    type: 'value',
                    max: 100,
                    axisLabel: {
                        formatter: '{value} %',
                        textStyle: {
                            color: '#AAAAAA'
                        }
                    }
                }],
                series: [
                    {
                        name: KPI_NAME + "预测值",
                        type: 'line',
                        color: '#EFB700',
                        data: ydata1
                    },
                    {
                        name: KPI_NAME + "基线",
                        type: 'line',
                        color: '#4671FF',
                        data: ydata2
                    },
                    {
                        name: KPI_NAME + "当日值",
                        type: 'line',
                        color: '#44FF10',
                        data: ydata3
                    },
                    {
                        name: KPI_NAME + "阀值",
                        type: 'line',
                        color: '#FF0A0E',
                        data: ydata4
                    }
                ]
            };
            forecast.setOption(option);
        }, error: function (textStatus) {
            console.log("error:" + textStatus.status);
        }
    });
}